<template>
    <div class="head">
      <div class="head-bg">
        <span>
          <img src="../assets/logo.png" alt />
        </span>
        <div class="head-right">
          <span 
              class="link"
              @click="jumpTo(1)" 
              :class="currentpage==1?'active':''">
              主页
          </span>
          <span 
              class="link" 
              @click="jumpTo(2)" 
              :class="currentpage==2?'active':''">
              企业文化
          </span>
          <span 
              class="link" 
              @click="jumpTo(3)" 
              :class="currentpage==3?'active':''">
              关于我们
          </span>
          <span 
              class="link"
              @click="jumpTo(4)" 
              :class="currentpage==4?'active':''">
              加入我们
          </span>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name:'Head',
    props:{
      currentpage:{
        type:Number,
        require:true
      }
    },
    methods:{
      jumpTo(i){
        let v=i==1?'Home':i==2?'Culture':i==3?'About':'Join'
        this.$router.push({name:v})
      }
    }
  }
</script>

<style scoped>
.head {
  width: 100%;
  position: fixed;
  z-index: 10;
  background-color: #000;
  color: #fff;
  opacity: 1;
}

.head-bg {
  width: 1200px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.head-right {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 50%;
}

.head-right .link {
  width: 20%;
  text-align: center;
  padding-bottom: 10px;
}

.head-right .linka:hover {
  color: #ff0;
}

.head-right .linka:first-child {
  width: 15%;
}

.active {
  color: #ff0;
  border-bottom: 1px solid #ff0;
}
</style>